<template>
	<div class="back-top-container" @click="handleClick" v-show="isShow">
		<icon type="arrowUp"></icon>
	</div>
</template>

<script>
import Icon from '@/components/Icon'
import debounce from '@/utils/debounce'
export default {
	name: 'BackTop',
	components: { Icon },
	created() {
		// debounce
		this.$bus.$on('mainScroll', debounce(this.handleScroll, 150))
	},
	data() {
		return {
			isShow: false,
		}
	},
	methods: {
		handleClick() {
			// 回到顶部-main-container的顶部，在Detail.vue里面
			this.$bus.$emit('setMainScroll', 0)
		},
		handleScroll(dom) {
			if (!dom) {
				this.isShow = false
				return
			}
			this.isShow = dom.scrollTop > 500
		},
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.back-top-container {
	position: fixed;
	width: 50px;
	height: 50px;
	right: 50px;
	bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s;
	&:hover {
		background-color: @warn;
		color: #fff;
	}
	i {
		font-size: 30px;
		line-height: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>
